<template>
  <div >
    <el-table :data="List" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="120"
   :formatter="formatterQuestionType"
      >
      </el-table-column>
      <el-table-column  label="题干" width="300" >
          <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
          </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
                  <template slot-scope="scope">
           {{scope.row.addDate|parseTimeByString}}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="120"
        :formatter="formatterDifficulty"
      >
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="120"
        :formatter="chkState"
      >
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column
        prop="publishState"
        label="发布状态"
        width="120"
        :formatter="PublishStateA"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="preview(scope.row)"
            type="text"
            size="small"

          >
            预览
          </el-button>
          <el-button
            @click.native.prevent="check(scope.row)"
            type="text"
            size="small"
            :disabled="scope.row.chkState ? true : false"
          >
            审核
          </el-button>
          <el-button
            @click.native.prevent="alter(scope.row)"
            :disabled="scope.row.publishState? false : true "
            type="text"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click.native.prevent="putaway(scope.row)"

            type="text"
            size="small"
          >
            {{scope.row.publishState? '上架' : '下架'}}
          </el-button>
          <el-button
            @click.native.prevent="Delete(scope.row)"
            :disabled="scope.row.publishState?  false : true "
            type="text"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
      <el-form
        ref="form"
        :model="form"
        label-width="10px"
        :rules="rules"

      >
        <el-form-item >
          <el-radio-group v-model="form.chkState">
            <el-radio label="1" >通过</el-radio>
            <el-radio label="2" >拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :hide-required-asterisk="true" prop="chkRemarks">
          <el-input
            type="textarea"
            v-model="form.chkRemarks"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="251px" >
    <el-button  @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </el-form-item>
      </el-form>

    </el-dialog>
    <template v-if="previewPop"><el-dialog
  title="题目预览"
  :visible.sync="dialogVisible2"
  width="800px"
  >
<Preview :link="link" @closure="Closure" />
</el-dialog></template>
  </div>
</template>

<script>
// 导入枚举数组
import {
  questionType,
  chkType,
  difficulty,
  publishType
} from '@/api/hmmm/constants.js'

import { remove, choiceCheck, choicePublish } from '@/api/hmmm/questions.js'

import Preview from '@/components/Preview'

export default {
  name: 'Choiceness',
  props: {
    List: {
      type: [Array, Object],
      required: true
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      form: {
        chkState: '1',
        chkRemarks: ''
      },

      rules: {

        chkRemarks: [
          { required: true, message: '请填写审核意见', trigger: 'blur' }
        ]
      },
      disabled: false,
      previewPop: false,
      link: {},
      auditList: {}
    }
  },
  components: {
    Preview
  },
  created () {

  },
  methods: {
    //   子组件传来的关闭事件
    Closure () {
      this.dialogVisible2 = false
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },

    // 点击审核确定
    confirm () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        // console.log(this.auditList)
        this.disabled = true
        this.auditList.chkState = this.form.chkState * 1
        this.auditList.chkRemarks = this.form.chkRemarks
        // console.log(this.auditList)
        await choiceCheck(this.auditList)

        this.$message.success('审核完毕')

        this.dialogVisible = false
        this.$refs.form.resetFields()
      })
    },

    // 格式化题型
    formatterQuestionType (row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },

    // 难易程度
    formatterDifficulty (row, colum, cellValue, index) {
      const obj = difficulty.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    // 审核状态
    chkState (row, column, cellValue, index) {
      const obj = chkType.find((item) => item.value === cellValue + 1)

      return obj ? obj.label : '未知'
    },

    // 发布状态
    PublishStateA (row, column, cellValue, index) {
      const obj = publishType.find((item) => item.value === +cellValue + 1)
      //   console.log(publishType)
      //   console.log(cellValue)
      //   console.log(obj)

      return obj ? obj.label : '未知'
    },
    // 预览
    preview (row) {
      this.previewPop = true
      this.dialogVisible2 = true

      this.link = row
    },
    // 审核
    check (row) {
      //   console.log(id)
      this.dialogVisible = true

      this.auditList = row
    },

    // 修改
    alter (row) {
      //   this.$router.push('/questions/new')
      this.$router.push({
        path: '/questions/new',
        query: {
          id: row.id
        }
      })
    },
    // 上架
    async putaway (row) {
      const resd = await this.$confirm(`您确认${row.publishState ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (resd === 'cancel') return this.$message('已取消')

      row.publishState = row.publishState ? 0 : 1

      await choicePublish({ id: row.id, publishState: row.publishState })

      if (row.publishState !== 0) {
        this.$message.success('下架成功')
      } else {
        this.$message.success('上架成功')
      }
    },
    // 删除
    async Delete (index) {
      const res = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (res === 'cancel') return this.$message('删除已取消')

      await remove(index)

      this.$message.success('删除成功')

      this.$emit('cost')
    }
  }

}
</script>
